<template>
	<view class="kaiCom col-3e">
        <scroll-view :scroll-x="true" class="kaiNav font12">
            <block v-for="(kai, index) in list" :key="index">
                <view class="kaiItem txtHidden" :class="{'active': currKai === index}" @click="changeKai(index)">
                    {{kai.title}}
                </view>
            </block>
        </scroll-view>

        <view class="kaiPriceMsg defSty text-center top-20 bottom-20 flex">
            <view class="priceItem font11" @click="clickInfoPrice">
                <view class="valBox">
                    <block v-if="detail.price">
                        约<text class="numVal col-error fontBold">{{detail.price}}</text>元/平
                    </block>
                    <block v-else>
                        <text class="font15 col-grey fontBold">待定</text>
                    </block>
                </view>
                <view class="labelTxt col-grey top-5 flex">
                    <text class="right-3">参考单价</text>
                    <text class="iconInfo bg" v-if="detail.price"></text>
                </view>
            </view>
            <view class="priceItem font11"  @click="clickInfoAmount">
                <view class="valBox">
                    <block v-if="amountRange && amountRange.min.amount">
                        约<text class="numVal fontBold">{{ Math.round(amountRange.min.amount) +'-'+ Math.round(amountRange.max.amount)}}</text>万/套
                    </block>
                    <block v-else-if="panAmountRange">
                        约<text class="numVal fontBold">{{ panAmountRange }}</text>万/套
                    </block>
                    <block v-else>
                        <text class="col-grey fontBold font15">待定</text>
                    </block>
                </view>
                <view class="labelTxt col-grey top-5 flex">
                    <text class="right-3">参考总价{{ isFeiBiao?'(含非标)':'' }}</text>
                    <text class="iconInfo bg" v-if="amountRange.min && amountRange.min.amount"></text>
                </view>
            </view>
            <view class="statusItem priceItem font11">
                <view class="valBox">
                    <text class="font15 fontBold">{{ detail.sell_type_display }}</text>
                </view>
                <view class="labelTxt col-grey top-5">销售状态</view>
            </view>
        </view>

        <!-- <view class="sellerWrap flex col-theme border-theme font13" v-if="gold && gold.id">
            <view class="avatarWrap flex">
				<image class="avatar right-5" :src="gold.avatar_url" :lazy-load="true"></image>
                <text>王牌销售为您解答</text>
            </view>
            <view class="contactBtns flex">
                <view @click="contactSales(true)">
                    <u-icon name="phone-fill" color="#007235" size="30"></u-icon>
                    <text class="left-5">电话</text>
                </view>

                <view class="left-20" @click="contactChat" v-if="socketOpen">
                    <u-icon name="chat-fill" color="#007235" size="30"></u-icon>
                    <text class="left-5">咨询</text>
                </view>
            </view>
        </view> -->

        <view class="fangBianContent" v-if="prodDetail.fast">
            <view class="fangBianCard bg col-fff">
                <image class="logoImg" src="https://image.srea.org.cn/xcx/fang-bian-logo.png" mode="widthFix"></image>
                <view class="cardTit font20 fontBold top-10">方便看房  专属报名通道</view>
                <!-- <view class="signTxt font10 top-8">立即咨询，了解活动信息</view> -->

                <view class="callBtn btnItem flex bg-fff boxShadow" @click="fangBianCall">
                    <view class="phoneWrap flex">
                        <u-icon name="phone-fill" color="#E50012" size="18"></u-icon>
                    </view>
                    <text class="fontBold font11 left-3">一键拨打</text>
                </view>

                <view class="signBtn btnItem flex bg-fff boxShadow" @click="clickSignUp">
                    <view class="phoneWrap flex">
                        <u-icon name="file-text" color="#E50012" size="18"></u-icon>
                    </view>
                    <text class="fontBold font11 left-3">报名留电</text>
                </view>
            </view>

            <view class="cuoshiWrap top-5" v-if="prodDetail.youhui || prodDetail.bianmin">
                <view class="rowWrap flex border-bottom-grey" v-if="prodDetail.youhui">
                    <view class="labelWrap col-E50012 fontBold">购房优惠措施</view>
                    <view class="valueWrap font13">{{ prodDetail.youhui }}</view>
                </view>

                <view class="rowWrap flex" v-if="prodDetail.bianmin">
                    <view class="labelWrap col-E50012 fontBold">参与便民措施</view>
                    <view class="valueWrap font13">{{ prodDetail.bianmin }}</view>
                </view>

                <view class="liveNoticeWrap flex bg-FDF3F3 top-5" v-if="liveNotice.length > 0">
                    <view class="liveIcon flex col-fff bg-E50012">
                        <u-icon name="volume-up" color="#FFFFFF" size="28"></u-icon>
                        <text class="font10 left-3">直播预告</text>
                    </view>
                    <view class="noticeWrap col-E50012 font12">
                        <text class="noticeTxt">{{ liveNotice[0] }}</text>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="tableMsg text-center">
            <view class="tableBox flex border-grey font13">
                <view class="msgItem width-25 border-right-gray">
                    <view class="tBody tHead bg-gray col-grey">认购时间</view>
                    <view class="tBody">{{detail.buy_start_time?detail.buy_start_time.substr(0, 10):'--'}}</view>
                </view>
                <view class="msgItem width-25 border-right-gray">
                    <view class="tBody tHead bg-gray col-grey">开盘时间</view>
                    <view class="tBody">{{detail.kai_time?detail.kai_time:'--'}}</view>
                </view>
                <view class="msgItem width-25 border-right-gray">
                    <view class="tBody tHead bg-gray col-grey">本期房源数</view>
                    <view class="tBody">{{detail.house_count?detail.house_count+'套':'--'}}</view>
                </view>
                <view class="msgItem width-25 border-right-gray">
                    <view class="tBody tHead bg-gray col-grey">参考面积段</view>
                    <view class="valueWrap flex">
                        <text>{{ houseSizeRange?houseSizeRange+'m²':'--' }}</text>
                        <text class="font11" v-if="isFeiBiao">(含非标)</text>
                    </view>
                </view>

                <view class="msgItem width-25 border-right-gray">
                    <view class="tBody tHead bg-gray col-grey">入围比例</view>
                    <view class="tBody">{{detail.ruwei_ratio?detail.ruwei_ratio:'--'}}</view>
                </view>

                <view class="msgItem width-25 border-right-gray">
                    <view class="tBody tHead font13 bg-gray col-grey">社保系数</view>
                    <view class="tBody">{{detail.bao_ratio?detail.bao_ratio+'分/月':'--'}}</view>
                </view>

                <view class="msgItem width-50">
                    <view class="tBody tHead bg-gray col-grey">装修情况</view>
                    <view class="fitWrap" @click="openFitExcel">
                        <view v-if="detail.xiu">
                            {{detail.xiu}}
                            <text v-if="fitExcelUrl">，</text>
                            <text class="col-link" v-if="fitExcelUrl">查看装修标准</text>
                        </view>
                        <text class="font11">(最终以开发商信息为准)</text>
                    </view>
                </view>
            </view>

            <view class="border-grey top-20">
                <view class="renGouCountDown flex bg-theme col-fff font13" v-if="timestamp>0">
                    <text>本期认购中(实时统计)</text>
                    <view>
                        距认购结束:
                        <u-count-down :timestamp="timestamp" :show-seconds="false" color="#007235" separator-color="#ffffff" font-size="24" separator-size="26" separator="zh"></u-count-down>
                    </view>
                </view>
                <view class="ruWeiCard bg-FFF6E0">
                    <view class="ruWeiGroup flex">
                        <view class="RuWeiWrap flex font12">
                            <view class="iconTxtItem flex right-10" @click="toRuwei" v-if="detail.points_state || detail.guess_points">
                                <view class="RuWeiIcon iconWrap bg right-3"></view>
                                <view>
                                    <block v-if="detail.points_state">
                                        入围分:
                                        <text class="col-link lineTxt">{{ detail.points_state }}</text>
                                    </block>
                                    <block v-else-if="detail.guess_points">
                                        预估分数:
                                        <text class="col-link lineTxt">{{ detail.guess_points }}</text>
                                    </block>
                                    <text v-else>入围分:--</text>
                                </view>
                            </view>
                            <view class="iconTxtItem flex">
                                <view class="renGouIcon iconWrap bg right-3"></view>
                                <view v-if="detail.buy_ratio">认购率:{{ detail.buy_ratio }}%{{chuFaTxt}}</view>
                                <view v-else-if="detail.guess_buy_ratio">认购率:{{ detail.guess_buy_ratio }}%{{chuFaTxt}}</view>

                                <view class="font10 text-left" v-else-if="detail.guess_reg_ratio || detail.guess_pay_ratio">
                                    <view>预约登记率{{ detail.guess_reg_ratio }}%</view>
                                    <view class="top-3">实际付款认购率{{ detail.guess_pay_ratio }}%</view>
                                </view>

                                <text v-else>认购率:--</text>
                            </view>
                        </view>

                        <!-- <view class="contactBtn flex bg-fff col-theme font12" @click="contactSales(false)" v-if="!detail.points_state && !detail.guess_points">
                            <image class="avatarImg right-5" :src="salesDetail.id ? salesDetail.avatar_url : pangAvatar" mode="heightFix"></image>
                            <text>{{ salesDetail.id ? '咨询销售' : '咨询销售' }}</text>
                        </view> -->
                    </view>

                    <view class="renGouLineGroup bg-fff" v-if="renGouProgress === -1">
                        <view class="text-left">认购组数：{{ formatRenGouGroup }}</view>
                        <block v-if="jiFenMax === 130">
                            <view class="XSJFLine lineTxtWrap flex" :class="{'activeWrap':renGouProgress >= 130 && renGouProgress >= jiFenMax}" :style="{left: `calc(${(140/lineMaxVal)*100}% - ${lineWidth}px + ${speedWidth}px)`}">
                                <text class="tipWrap font10 border-grey text-center bg-fff">限售&积分线</text>
                                <view class="dashedLine lineDefHeight"></view>
                                <view class="circleWrap bg-fff"></view>
                            </view>
                        </block>
                        <block v-else>
                            <view class="xianShLine lineTxtWrap flex" :class="{'activeWrap':renGouProgress >= 130}" :style="{left: `calc(${(140/lineMaxVal)*100}% - ${lineWidth/2}px + ${speedWidth}px)`}">
                                <text class="tipWrap col-grey font10 border-grey text-center bg-fff">限售130%</text>
                                <view class="dashedLine lineDefHeight"></view>
                                <view class="circleWrap bg-fff"></view>
                            </view>
                            
                            <view class="jifenLine lineTxtWrap flex" :class="{'activeWrap':renGouProgress >= jiFenMax}" :style="{left: `calc(${(jiFenMax/lineMaxVal)*100}% - ${lineWidth/2}px + ${speedWidth}px)`}" v-if="jiFenMax && lineMaxVal">
                                <text class="tipWrap font10 col-grey border-grey text-center bg-fff">积分{{ jiFenMax }}%</text>
                                <view class="dashedLine" :class="(jiFenMax - 130) > 60 ? 'lineDefHeight':'lineActHeight'"></view>
                                <view class="circleWrap bg-fff"></view>
                            </view>
                        </block>

                        <view class="lineProgWrap bg-e7 top-8">
                            <view class="progActi" :style="{width: `calc(${(lineMaxVal ? (renGouProgress / lineMaxVal)*100 : 0)}% + ${speedWidth}px)`}"></view>
                        </view>
                    </view>
                </view>

                <view class="houseTypes border-bottom-gray text-left top-10" v-if="houseSizeArr.length > 0">
                    <view class="fontBold">
                        户型建面
                    </view>
                    <view class="font13 top-5 col-grey">
                        <block v-for="(sizeItem, index) in houseSizeArr" :key="index">
                            {{sizeItem.build_size_range}}m²
                            {{sizeItem.size_type_display}}
                            {{sizeItem.resultNum?sizeItem.resultNum+'套':''}}
                            {{sizeItem.sell_type_display?"("+sizeItem.sell_type_display+")":''}}
                            {{(index == houseSizeArr.length-1) ? '':'，'}}
                        </block>
                    </view>
                </view>

                <view class="houseClassify border-bottom-gray text-left">
                    <view class="left-10 top-10 fontBold">高层详情</view>
                    <view class="houseClassMsg top-5 bottom-5 font13 flex">
                        <view class="msgItem">
                            <text class="col-grey">得房率：</text>{{detail.house_ratio?detail.house_ratio+'%':'--'}}
                        </view>
                        <view class="msgItem">
                            <text class="col-grey">套内层高：</text>{{detail.house_height?detail.house_height+'m':'--'}}
                        </view>
                        <view class="msgItem">
                            <text class="col-grey">连廊：</text>{{detail.lianlang?detail.lianlang:'--'}}
                        </view>
                        <view class="msgItem">
                            <text class="col-grey">梯户比：</text>{{detail.th_ratio?detail.th_ratio:'--'}}
                        </view>
                    </view>
                </view>

                <view class="basicBox text-left">
                    <view class="left-10 top-10 fontBold">小区概况</view>
                    <view class="basics flex top-5 bottom-5 font13">
                        <block v-for="(item, key) in basicList" :key="key">
                            <view class="basicItem">
                                <image class="basicIcon" :src="item.imageUrl" mode="heightFix"></image>
                                <text class="left-5 col-grey">{{item.name}}</text>
                                <text class="left-5">{{item.value?item.value:'--'}}{{item.value?item.unit:''}}</text>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
        </view>

        <decoration-standard :tableData="decoration" @contactPang="contactPangCallback" @mianZeChange="mianze = true" v-if="decoration.length > 0"></decoration-standard>

        <view class="kaiContent">
            <view class="housePrice top-20 flex font12">
                <view class="yijia itemImg bg flex" @click="toTablePrice">
                    <view class="font15 fontBold bottom-5">一房一价</view>
                    算首付算房贷
                </view>
                <block v-if="detail.inpc">
                    <view class="renGou itemImg bg flex" @click="toRenGouJianCe">
                        <view class="font15 fontBold bottom-5">认购监测</view>
                        查看认购详情
                    </view>
                </block>
                <block v-else>
                    <view class="ziliao itemImg bg flex" @click="toBuyMeans">
                        <view class="font15 fontBold bottom-5">买房资料</view>
                        助力认购买房
                    </view>
                </block>
            </view>

            <view class="msgBox" v-if="hasValCheckList.length > 0">
               <view class="kaiTitle top-20 fontBold">阳光无忧清单</view>

               <view class="orderMianze flex top-10 font12">
                    <view class="tipWrap col-error bg-FFBC00 font10">提示</view>
                    <view class="col-grey left-5">清单内容仅供参考，不作为交付依据</view>
               </view>
               <block v-for="(checkItem, checkIndex) in hasValCheckList" :key="checkIndex">
                    <view class="msgItem" :class="checkItem.block?'width100':'width50'">
                        <text class="col-grey">{{ checkItem.name }}：</text>
                        <text>{{ checkItem.value }}</text>
                    </view>
               </block>
            </view>

           <view class="msgBox">
               <view class="kaiTitle top-20 fontBold">
                   开盘信息
               </view>
                <block v-if="hasPriceTypes.length > 0">
                    <view class="msgItem width50" v-for="priceItem in hasPriceTypes" :key="priceItem.value">
                        <text class="tit col-grey">{{priceItem.label}}单价：</text>
                        <text class="fontBold">{{priceItem.price}}元/m²</text>
                    </view>
                </block>

                <view class="msgItem width50" v-if="detail.ren">
                    <text class="tit col-grey">人才房：</text>
                    {{detail.ren}}
                </view>

                <view class="msgItem width100 flex" v-if="houseTypeList.length">
                    <text class="tit col-grey">销售户型：</text>
                    <view class="valueBox">
                        <block v-for="(item, index) in houseTypeList" :key="index">
                            <text class="right-5">{{item}}</text>
                        </block>
                    </view>
                </view>

                <view class="msgItem width100 flex" v-if="detail.building">
                    <text class="tit col-grey">入市房源：</text>
                    <view class="valueBox">
                        {{detail.building}}
                    </view>
                </view>

                <view class="msgItem width100 flex" v-if="detail.zheng">
                    <text class="tit col-grey">预售证：</text>
                    <view class="valueBox">
                        {{detail.zheng}}
                    </view>
                </view>

                <view class="msgItem width100 flex" v-if="detail.money">
                    <text class="tit col-grey">认购条件：</text>
                    <view class="valueBox">
                        {{detail.money}}
                    </view>
                </view>

                <view class="msgItem width100 flex" v-if="base.community_build_company || detail.community_build_company">
                    <text class="tit col-grey">开发商：</text>
                    <view class="valueBox">
                        {{detail.community_build_company?detail.community_build_company:base.community_build_company}}
                    </view>
                </view>

                <view class="msgItem width100 flex" v-if="base.community_property_company">
                    <text class="tit col-grey">物业公司：</text>
                    <view class="valueBox">
                        {{base.community_property_company}}
                    </view>
                </view>

                <view class="msgItem width100 flex" v-if="base.community_property_cost">
                    <text class="tit col-grey">物业费：</text>
                    <view class="valueBox">
                        {{base.community_property_cost}}元/㎡/月
                    </view>
                </view>

                <view class="msgItem width50" v-if="detail.get_time">
                    <text class="tit col-grey">交房时间：</text>
                    {{detail.get_time}}
                </view>
            </view>

            <view class="houseTypeImages top-20 font13 flex">
                <view class="imgBtn flex" @click="toKaiPalte('type')">
                    <image class="iconImg right-5" src="https://image.srea.org.cn/xcx/icon/icon-detail-huxingtu.png" mode="widthFix"></image>
                    本期户型图
                </view>
                <view class="imgBtn flex" @click="toKaiPalte('rules')">
                    <image class="iconImg right-5" src="https://image.srea.org.cn/xcx/icon/icon-detail-rengou-guize.png" mode="widthFix"></image>
                    认购规则
                </view>
                <view class="imgBtn flex" @click="toKaiPalte('yao')">
                    <image class="iconImg right-5" src="https://image.srea.org.cn/xcx/icon/icon-detail-yao-hao.png" mode="widthFix"></image>
                    摇号结果
                </view>
            </view>
            
            <block v-if="JSON.stringify(detail) !== '{}' && !detail.hidden_time_line">
                <detail-time-line></detail-time-line>
            </block>

            <view class="lineHeight15 top-15 font10 col-grey">
                免责声明：{{ disclaimer }}
            </view>
        </view>

        <u-modal v-model="mianze" title="免责声明" confirm-text="我知道了" confirm-color="#007235" :mask-close-able="true">
            <view class="mianzeCon font14">
                <view class="listItem">
                    免责声明：本资料中所有文字、图片、数据信息等仅供参考。
                </view>
                <view class="listItem">
                    本资料中示意图仅对项目与交通设施、公共设施、周边环境等的地理关系进行示意，不反映各部分之间的实际距离，相关信息仅供参考。
                </view>
                <view class="listItem">
                    项目附近地块的具体规划用途、开发节奏等状况，最终以政府公布的规划内容为准。
                </view>
                <view class="listItem">
                所展示项目的面积、结构、装修、装饰、设备、设施、建筑物/构筑物、景观、交通设施、周边环境等仅供参考，不构成交付标准，最终交付标准以商品房买卖合同及政府等相关部门的批准文件为准。
                </view>
            </view>
        </u-modal>
	</view>
</template>

<script>
    import DetailTimeLine from './detail-time-line.vue';
    import { mapState } from 'pinia';
    import { useUserInfoStore, useConfigStore, useIndexStore } from '@/store/index';
    import { delSameObjValue, checkLogin, checkUserInfo, isDuringDate, parserDate } from '@/common/common';
    // import { userCallAdviser } from '@/common/api-adviser';

	export default {
        components: {
            DetailTimeLine
        },
		data() {
			return {
                mianze: false,
                currKai: 0,
                pangAvatar: 'https://image.srea.org.cn/xcx/xpIcon.png',
                basicList: {
                    car_ratio: {
                        name: '车位比',
                        value: '',
                        unit: '',
                        imageUrl: 'https://image.srea.org.cn/xcx/icon/icon-detail-parking-base.png'
                    },
                    people_car: {
                        name: '人车分流',
                        value: '',
                        unit: '',
                        imageUrl: 'https://image.srea.org.cn/xcx/icon/icon-detail-renche-base.png'
                    },
                    bulk_ratio: {
                        name: '容积率',
                        value: '',
                        unit: '',
                        imageUrl: 'https://image.srea.org.cn/xcx/icon/icon-detail-rongji-base.png'
                    },
                    balcony: {
                        name: '阳台',
                        value: '',
                        unit: '',
                        imageUrl: 'https://image.srea.org.cn/xcx/icon/icon-detail-yangtai-base.png'
                    },
                    pools: {
                        name: '泳池',
                        value: '',
                        unit: '',
                        imageUrl: 'https://image.srea.org.cn/xcx/icon/icon-detail-yongchi-base.png'
                    },
                    plant_ratio: {
                        name: '绿化率',
                        value: '',
                        unit: '%',
                        imageUrl: 'https://image.srea.org.cn/xcx/icon/icon-detail-lvhua-base.png'
                    },
                    outside: {
                        name: '外立面',
                        value: '',
                        unit: '',
                        imageUrl: 'https://image.srea.org.cn/xcx/icon/icon-detail-wailimian-base.png'
                    },
                    diku: {
                        name: '地库',
                        value: '',
                        unit: '',
                        imageUrl: 'https://image.srea.org.cn/xcx/icon/icon-detail-diku.png'
                    }
                },
                checklist: {
                    kongtiaogl: {
                        name: '中央空调功率',
                        value: '',
                        block: false
                    },
                    zhenshiqi: {
                        name: '真石漆占比',
                        value: '',
                        block: false
                    },
                    kongtiaopp: {
                        name: '中央空调品牌',
                        value: '',
                        block: false
                    },
                    xinfeng: {
                        name: '新风品牌',
                        value: '',
                        block: false
                    },
                    datang: {
                        name: '入户大堂空调品牌',
                        value: '',
                        block: false
                    },
                    dinuan: {
                        name: '地暖品牌',
                        value: '',
                        block: false
                    },
                    diban: {
                        name: '地板环保标准',
                        value: '',
                        block: false
                    },
                    dianti: {
                        name: '电梯品牌',
                        value: '',
                        block: false
                    },
                    doorw: {
                        name: '电梯开门宽度',
                        value: '',
                        block: false
                    },
                    doorh: {
                        name: '电梯开门高度',
                        value: '',
                        block: false
                    },
                    jiakong: {
                        name: '架空层有无设施',
                        value: '',
                        block: false
                    },
                    baozhang: {
                        name: '保障房/租赁住房',
                        value: '',
                        block: true
                    }
                }
			}
		},

        props: {
            list: {
                type: Array,
                default: () => ([])
            },
            detail: {
                type: Object,
                default: () => ({})
            },
            prodDetail: {
                type: Object,
                default: () => ({})
            },
            liveNotice: {
                type: Array,
                default: () => ([])
            },
            hasPriceTypes: {
                type: Array,
                default: () => ([])
            },
            amountRange: {
                type: Object,
                default: () => ({})
            },
            feiBiao: {
                type: Array,
                default: () => ([])
            },
            sizeRange: {
                type: Object,
                default: () => ({})
            },
            houseSizeList: {
                type: Array,
                default: () => ([])
            },
            base: {
                type: Object,
                default: () => ({})
            },
            dengji: {
                type: Object,
                default: () => ({})
            },
            productId: {
                type: Number,
                default: 0
            },
            fitExcelUrl: {
                type: String,
                default: ''
            },
            salesDetail: {
                type: Object,
                default: () => ({})
            },
            gold: {
                type: [Object, undefined],
                default: () => ({})
            },
            decoration: {
                type: Array,
                default: []
            }
		},

        computed:{
            ...mapState(useUserInfoStore, ['userInfo']),
            ...mapState(useConfigStore, ['puid']),
            ...mapState(useIndexStore, ['disclaimer', 'nowCityCode']),


            houseSizeArr: function() {
                let arr = delSameObjValue(this.houseSizeList, 'resultNum', ['build_size_range','size_type_display'], ['house_count'])
                return arr
            },

            //面积范围
            houseSizeRange: function () {
                if(this.sizeRange && this.sizeRange.min.size) {
                    return `${Math.round(this.sizeRange.min.size)}-${Math.round(this.sizeRange.max.size)}`
                }
                return ''
            },
            
            //开盘内的总价范围
            panAmountRange: function() {
                const min = this.detail.min_amount?Math.round(this.detail.min_amount):'';
                const max = this.detail.max_amount?Math.round(this.detail.max_amount):'';
                
                return `${min?min+'-':''}${max}`
            },

            houseTypeList: function() {
                return this.detail.sell_house_type && this.detail.sell_house_type.length>0 ? [...new Set(this.detail.sell_house_type)] : []
            },

            //认购中距离结束倒计时
            timestamp: function() {
                if(!this.detail.buy_end_time) return 0;
                const renGouIng = isDuringDate(this.detail.buy_start_time, this.detail.buy_end_time)
                if(renGouIng !== 'ongoing') return 0;
                const transTimes = parserDate(this.detail.buy_end_time);
                const nowTimes = new Date().getTime();
                return (new Date(transTimes).getTime() - nowTimes)/1000
            },

            //总价段是否包含非标判断
            isFeiBiao: function() {
                if(this.feiBiao.length === 0) return false;
                return this.feiBiao.some(item => item.count > 0)
            },

            //环保清单有值的属性
            hasValCheckList: function() {
                let hasValArr = [];
                let obj = this.detail?.nobb;
                if(!obj) return hasValArr;

                for(let checKey in this.checklist) {
                    for(let key in obj) {
                        if(key === checKey && obj[key] !== null && obj[key] != '') {
                            hasValArr.push({
                                ...this.checklist[checKey],
                                value: obj[key]
                            })
                        }
                    }
                }
                return hasValArr;
            },

            //认购组数模糊
            formatRenGouGroup: function() {
                let num = this.detail?.buy_group || this.detail?.guess_buy_group;
                return num > 0 ? (num>=10?Math.floor(num/10)*10+'+' : '<10') : '--'
            },

            //触发积分轴线的计算比例
            lineMaxVal: function() {
                // const renGouNum = this.detail?.buy_group || 0;//认购组数
                // const houseNum = this.detail?.house_count || 0;//总房源数
                let renGouRatio = parseFloat(this.detail?.buy_ratio || this.detail?.guess_buy_ratio) || 0;
                const jiFenNum = parseFloat(this.detail?.ruwei_ratio) * 100 || 0;
                const MaxNum = Math.max(130, renGouRatio, jiFenNum);
                if(!MaxNum) return 0;
                return MaxNum + MaxNum*.2;
            },

            //积分线
            jiFenMax: function() {
                let ratio = parseFloat(this.detail?.ruwei_ratio);
                if(!ratio) return 0;
                return ratio * 100
            },

            //认购率,认购进度条宽度
            renGouProgress: function() {
                let ratio = parseFloat(this.detail?.buy_ratio || this.detail?.guess_buy_ratio);
                if(!ratio) return 0;
                return ratio
            },

            //积分线宽度
            lineWidth: function() {
                return uni.upx2px(120)
            },

            //预留宽度避免遮挡文字
            speedWidth: function() {
                return uni.upx2px(40)
            },

            //触发/未触发限售和积分文本
            chuFaTxt: function() {
                let ratio = parseFloat(this.detail?.buy_ratio || this.detail?.guess_buy_ratio);
                if(!ratio) return '';
                let exceedXianShou = ratio >= 130;
                let exceedJiFen = ratio >= this.jiFenMax;
                if(exceedXianShou && exceedJiFen) {
                    return '(已触发积分&限售)'
                }
                if(exceedJiFen) {
                    return '(已触发积分)'
                }
                if(exceedXianShou) {
                    return '(已触发限售)'
                }
                return '(未触发限售)'
            }
        },

        watch: {
            //监听pan内容更新小区概况
            detail(newVal) {
                if(JSON.stringify(newVal) != '{}') {
                    for(let panKey in newVal) {
                        for(let key in this.basicList) {
                            if(panKey == key) {
                                this.basicList[key].value = newVal[panKey]
                            }
                        }
                    }
                }
            }
        },

        methods:{
            //选择某一开盘
            changeKai(index){
                this.currKai = index;
                this.$emit("changeKaiPan", this.list[index].id);
            },

            //点击咨询销售
            // contactSales(gold = false) {
            //     let sellerInfo = gold ? this.gold : this.salesDetail;
            //     if(!checkLogin()) {
            //         uni.navigateTo({
            //             url: `/pages/login/login?adviserId=${(sellerInfo && sellerInfo.id)?sellerInfo.id:''}&productId=${this.productId}`
            //         })
            //         return
            //     }
                
            //     if(sellerInfo && sellerInfo.id) {
            //         const that = this;
            //         uni.showModal({
            //             confirmColor: "#007235",
            //             content: '为得到更优质的服务，拨通后请说明来自【新房超市】',
            //             success: function (res) {
            //                 if (res.confirm) {
            //                     uni.makePhoneCall({
            //                         phoneNumber: sellerInfo.phone,
            //                         success() {
            //                             // userCallAdviser({
            //                             //     type: 0,
            //                             //     id: sellerInfo.id,
            //                             //     pid: that.productId
            //                             // }).then(res => {
            //                             // })
            //                         }
            //                     })
            //                 }
            //             }
            //         })
            //         return
            //     }
            //     this.$emit("contactPang");
            // },

            //咨询回调
            contactPangCallback() {
                this.$emit("contactPang");
            },

            //微聊咨询
            // async contactChat(){
            //     if(this.userInfo.id == this.gold.id || this.gold === null || !this.gold.id) return;
            //     if(!checkLogin()) {
            //         uni.navigateTo({
            //             url: `/pages/login/login?adviserId=${(this.gold && this.gold.id)?this.gold.id:''}&productId=${this.productId}`
            //         })
            //         return
            //     }
            //     if(!checkUserInfo()) {
            //         uni.navigateTo({
            //             url: `/pages/login/user-info-form`
            //         })
            //         return
            //     }
            //     let { channel_id } = await this.imService.checkChannelChat({city: this.nowCityCode, to_id: this.gold.id, frequency: 0, productId: this.productId});
            //     uni.navigateTo({
            //         url: `/pages/chat/private/chat?channelId=${channel_id?channel_id:''}&toId=${this.gold.id}`
            //     });
            // },

            //点击咨询方便看房
            fangBianCall() {
                const that = this;
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: `/pages/login/login?productId=${this.prodDetail.id}`
                    })
                    return
                }

                if(!this.prodDetail.fast_phone) {
                    this.$common.msg('暂无联系方式');
                    return
                }
                uni.makePhoneCall({
                    phoneNumber: this.prodDetail.fast_phone || '',
                    success: function() {
                        // try {
                        //     userCallAdviser({
                        //         type: 4,
                        //         id: that.prodDetail.fast_seller_id || '',
                        //         pid: that.prodDetail.id
                        //     })
                        // } catch (error) {}
                    }
                })
            },

            //点击预约报名
            clickSignUp() {
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: `/pages/login/login?productId=${this.prodDetail.id}`
                    })
                    return
                }
                if(!checkUserInfo()) {
                    uni.navigateTo({
                        url: `/pages/login/user-info-form`
                    })
                    return
                }
                uni.navigateTo({
					url: `/pages/house/sign-up/sign-up?productId=${this.prodDetail.id}&source=2`
                })
            },

            //点击参考单价info
            clickInfoPrice() {
                if(!this.detail.price) return;
                this.$emit("showPriceDialog", 'price');
            },

            //点击参考总价info
            clickInfoAmount() {
                let minAmount = this.amountRange?.min?.amount;
                if(!minAmount) return;
                this.$emit("showPriceDialog", 'amount');
            },

            //跳转本期户型图or认购规则or摇号结果
            toKaiPalte(type){
                let path = '';
                switch(type) {
                    case 'type':
                    path = '/pages/house/type-list';
                    break;

                    case 'rules':
                    path = '/pages/house/ren-gou-rules';
                    break;

                    case 'yao':
                    path = '/pages/house/yao-results';
                    break;
                }
                uni.navigateTo({
                	url: `${path}?kaiId=${this.list[this.currKai].id}&productId=${this.productId}&puid=${this.puid}&title=${this.detail.title}&prepage=楼盘详情页-${this.detail.id}-${this.detail.title}`
                })
            },

            //一房一价
            toTablePrice(){
                uni.navigateTo({
                    url: `/pages/house/one-house-one-price/one-house-one-price-table?productId=${this.productId}&kaiId=${this.list[this.currKai].id}&title=${this.detail.title}&puid=${this.puid}`
                })
            },

            //购房流程
            toBuyMeans() {
                uni.navigateTo({
                    url: `/pages/menus/tools/purchase-wiki/wiki?productId=${this.productId}&kaiId=${this.list[this.currKai].id}&title=${this.detail.title}&puid=${this.puid}&prepage=楼盘详情页-${this.detail.id}-${this.detail.title}`
                })
            },

            //认购监测
            toRenGouJianCe() {
                uni.navigateTo({
                    url: `/pages/houses/renchou-jiance/rengou-detail?productId=${this.productId}&kaiId=${this.list[this.currKai].id}&puid=${this.puid}&title=${this.detail.title}&prepage=楼盘详情页-${this.productId}-${this.detail.title}`
                })
            },

            //入围分数
            toRuwei(){
                if(this.detail.points !== '0') {
                    uni.navigateTo({
                    	url: `/pages/house/ruwei-fraction?productId=${this.productId}&kaiId=${this.list[this.currKai].id}&title=${this.detail.title}&puid=${this.puid}&prepage=楼盘详情页-${this.detail.id}-${this.detail.title}`
                    })
                }
            },
            
            //打开装修详情excel
            openFitExcel() {
                if(!this.fitExcelUrl) return;
                uni.downloadFile({
                  url: this.fitExcelUrl,
                  success: function (res) {
                    var filePath = res.tempFilePath;
                    uni.openDocument({
                      filePath: filePath,
                      success: function (res) {
                      }
                    });
                  }
                });
            }
        }
	}
</script>

<style lang="scss" scoped>
@keyframes aniMove {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(-100%);
    }
}
    .width-25{
        width: 25%;
    }
    .width-33{
        width: 33.333%;
    }
    .width-50{
        width: 50%;
    }
    .width-100{
        width: 100%;
    }
    .width50{
        width: 50%;
        display: inline-block;
    }
    .width100{
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .border-right-gray{
        border-right: 1rpx solid rgba(0,0,0,.1);
    }
    .border-bottom-gray{
        border-bottom: 1rpx solid rgba(0,0,0,.1);
    }
	.kaiCom{
        line-height: 1.2;
        border-radius: 20rpx;
        margin: 0rpx 20rpx 20rpx 20rpx;
        padding: 30rpx 0rpx;
        .kaiNav{
            width: calc(100% - 22rpx);
            margin-left: 22rpx;
            white-space: nowrap;
            .kaiItem{
                display: inline-block;
                margin-right: 40rpx;
                padding-bottom: 20rpx;
                position: relative;
                max-width: 400rpx;
            }
            .active{
                font-size: 30rpx;
                font-weight: bold;
                &::after{
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 20%;
                    width: 60%;
                    height: 5rpx;
                    background-color: $theme-color;
                }
            }
        }
        .kaiPriceMsg{
            align-items: stretch;
            justify-content: space-between;
            .priceItem{
                .iconInfo{
                    width: 26rpx;
                    height: 26rpx;
                    display: inline-block;
                    background-image: url("https://image.srea.org.cn/xcx/icon/icon-detail-info-circle.png");
                }
            }
        }
        .defSty{
            .priceItem{
                .numVal{
                    font-size: 32rpx;
                }
                &:first-child{
                    padding-left: 20rpx;
                }
                &:last-child{
                    padding-right: 20rpx;
                }
            }
            .statusItem{
                .valBox{
                    margin-top: 2rpx;
                }
            }
        }
        .kaiContent{
            padding: 0rpx 20rpx;
            .msgBox{
                .orderMianze{
                    justify-content: flex-start;
                    .tipWrap{
                        padding: 2rpx 6rpx;
                        border-radius: 4rpx;
                    }
                }
                
                .msgItem{
                    margin-top: 25rpx;
                    line-height: 1.3;
                    .tit{
                        width: 140rpx;
                    }
                    .valueBox{
                        width: calc(100% - 175rpx);
                    }
                }
            }
        }

        .housePrice {
            justify-content: space-between;
            .itemImg {
                width: calc(50% - 12rpx);
                height: 125rpx;
                border-radius: 20rpx;
                overflow: hidden;
                padding-left: 30rpx;
                flex-direction: column;
                align-items: flex-start;
            }

            .yijia {
                background-image: url("https://image.srea.org.cn/xcx/detail-house-price-bg.jpg");
            }

            .ziliao {
                background-image: url("https://image.srea.org.cn/xcx/detail-house-wiki-bg.jpg");
            }
            .renGou{
                background-image: url("https://image.srea.org.cn/xcx/detail-house-rengou-bg.jpg");
            }
        }

        .houseTypeImages{
            border: 1rpx solid rgba(0,0,0,.05);
            padding: 12rpx 0rpx;
            .imgBtn{
                width: 33.333%;
                border-right: 1rpx solid rgba(0,0,0,.05);
                &:last-child{
                    border: none;
                }
                .iconImg{
                    width: 50rpx;
                    /* #ifdef MP-TOUTIAO || MP-BAIDU */
                    height: 50rpx;
                    /* #endif */
                }
            }
        }
        .dengjiTable{
            margin: 40rpx 0rpx 20rpx 0rpx;
        }
        .sellerWrap{
            margin: 0 20rpx;
            padding: 10rpx 20rpx;
            justify-content: space-between;
            .avatarWrap{
                justify-content: flex-start;
                .avatar{
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 50%;
                }
            }
            .contactBtns{
                justify-content: flex-end;
            }
        }
        .fangBianContent{
            padding: 10rpx;
            margin: 20rpx 20rpx 40rpx 20rpx;
            border: 2rpx solid rgba(0,0,0,.06);
            .fangBianCard{
                position: relative;
                padding: 20rpx 0 34rpx 20rpx;
                background-size: 100% 100%;
                background-image: url("https://image.srea.org.cn/xcx/fang-bian-detail-banner.jpg");
                .logoImg{
                    width: 68%;
                }
                .signTxt{
                    // letter-spacing: 6rpx;
                }
                .btnItem{
                    color: #E50012;
                    position: absolute;
                    right: 20rpx;
                    z-index: 10;
                    padding: 10rpx 15rpx;
                    border-radius: 25rpx;
                    .phoneWrap{
                        width: 30rpx;
                        height: 30rpx;
                        border-radius: 50%;
                        border: 2rpx solid #E50012;
                    }
                }
                .callBtn{
                    top: 30rpx;
                }
                .signBtn{
                    top: 100rpx;
                }
            }
            .cuoshiWrap{
                .rowWrap{
                    justify-content: flex-start;
                    align-items: flex-start;
                    padding: 20rpx 0;
                    &:last-child{
                        border: none;
                    }
                    .labelWrap{
                        width: 200rpx;
                        padding-left: 10rpx;
                    }
                    .valueWrap{
                        width: calc(100% - 220rpx);
                    }
                }
                .liveNoticeWrap{
                    line-height: 1.4;
                    padding: 10rpx 20rpx;
                    align-items: flex-start;
                    justify-content: space-between;
                    .liveIcon{
                        width: 140rpx;
                    }
                    .noticeWrap{
                        width: calc(100% - 150rpx);
                        white-space: nowrap;
                        overflow: hidden;
                        .noticeTxt{
                            width: max-content;
                            display: inline-block;
                            animation-fill-mode: forwards;
                            animation: aniMove 15s linear infinite;
                        }
                    }
                }
            }
        }
        .tableMsg{
            margin: 20rpx 20rpx 0rpx 20rpx;
            .tableBox{
                flex-wrap: wrap;
                .msgItem{
                    .tBody{
                        height: 80rpx;
                        line-height: 80rpx;
                    }
                    .valueWrap{
                        height: 80rpx;
                        flex-direction: column;
                    }
                    .fitWrap{
                        height: 80rpx;
                        padding-top: 10rpx;
                    }
                }
            }
            .houseClassify{
                .houseClassMsg{
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    .msgItem{
                        line-height: 1.6;
                        padding-left: 20rpx;
                    }
                }
            }
            .renGouCountDown{
                justify-content: space-between;
                padding: 14rpx 20rpx;
            }
            .ruWeiCard{
                border-bottom: 2rpx solid #FFFFFF;
            }
            .ruWeiGroup{
                padding: 24rpx 20rpx;
                justify-content: space-between;
                .RuWeiWrap{
                    justify-content: flex-start;
                    .iconWrap{
                        width: 50rpx;
                        height: 50rpx;
                    }
                    .RuWeiIcon{
                        background-image: url("https://image.srea.org.cn/xcx/icon/icon-detail-ru-wei-points.png");
                    }
                    .renGouIcon{
                        background-image: url("https://image.srea.org.cn/xcx/icon/icon-detail-ren-gou-lv.png");
                    }
                    .lineTxt{
                        text-decoration: underline;
                    }
                }
                .contactBtn{
                    padding: 6rpx 16rpx;
                    border: 2rpx solid $theme-color;
                    .avatarImg{
                        height: 36rpx;
                        /* #ifdef MP-TOUTIAO || MP-BAIDU*/
                        width: 36rpx;
                        /* #endif */
                        border-radius: 50%;
                        box-shadow: rgba(102, 102, 102, 0.51) 0 2rpx 4rpx 0rpx;
                    }
                }
            }
            .renGouLineGroup{
                padding: 50rpx 0 20rpx 20rpx;
                margin: 0 20rpx 20rpx 20rpx;
                border-radius: 10rpx;
                position: relative;
                .XSJFLine{
                    min-width: 140rpx;
                }
                .xianShLine,.jifenLine{
                    min-width: 120rpx;
                }
                .lineTxtWrap{
                    z-index: 5;
                    bottom: 11rpx;
                    position: absolute;
                    flex-direction: column;
                    .tipWrap{
                        width: 100%;
                        padding: 6rpx 0;
                        color: #8A8A8A;
                        border-radius: 10rpx;
                    }
                    .dashedLine{
                        border-right: 2rpx solid #E7E7E7;
                    }
                    .lineDefHeight{
                        height: 10rpx;
                    }
                    .lineActHeight{
                        height: 40rpx;
                    }
                    .circleWrap{
                        width: 30rpx;
                        height: 30rpx;
                        border-radius: 50%;
                        border: 6rpx solid #E7E7E7;
                    }
                }
                .activeWrap{
                    .tipWrap{
                        color: #007235;
                    }
                    .circleWrap{
                        border: 6rpx solid #007235;
                    }
                }
                .lineProgWrap{
                    height: 8rpx;
                    .progActi{
                        max-width: 100%;
                        height: 8rpx;
                        background-color: $theme-color;
                    }
                }
            }
            .houseTypes{
                padding: 20rpx;
                line-height: 1.4;
            }
            .basicBox{
                .basics{
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    .basicItem{
                        padding-left: 20rpx;
                        line-height: 60rpx;
                        .basicIcon{
                            height: 26rpx;
                            /* #ifdef MP-TOUTIAO || MP-BAIDU*/
                            width: 30rpx;
                            /* #endif */
                            vertical-align: middle;
                        }
                    }
                }
            }
        }

        .mianzeCon{
            padding: 20rpx 30rpx;
            line-height: 1.5;
            .listItem{
                margin-top: 20rpx;
            }
        }
    }
</style>
